<template>
    <div class="page-work-my-picture">
        <el-tabs v-model="activeName">
            <el-tab-pane name="image" label="上传作品">
                <app-image :mode="mode" v-if="activeName === 'image'"></app-image>
            </el-tab-pane>
            <el-tab-pane name="article" label="上传文章">
                <app-article :mode="mode" v-if="activeName === 'article'"></app-article>
            </el-tab-pane>
        </el-tabs>

        <div class="form-notes">
            <app-note :page-type="activeName"></app-note>
        </div>
    </div>
</template>

<script>
import appImage from './image'
import appArticle from './article'
import appNote from './note'
export default {
    name: 'pictures',
    components: {
        appImage, appArticle, appNote
    },
    data(){
        return{
            activeName: 'image',
            mode: 'add',
        }
    },
    methods: {
        
    },
    created(){
        if(this.$route.query.workType){
            this.activeName = ['', 'image', 'article'][this.$route.query.workType]
        }
        this.mode = this.$route.query.mode || 'add'
    }
}
</script>



<style lang="less">
.page-work-my-picture{
    position: relative;
    width: 100%;
    .el-tabs{
        .el-tabs__header{
            .el-tabs__item{
                padding: 0 50px !important;
            }
        }
    
        .el-form{
            padding: 20px 50px;
            .form-block{
                display: block;
                width: 100%;
                clear: both;
            }
        }
    }
    .form-notes{
        position: absolute;
        top: 0;
        right: -240px;
        width: 220px;
        .note{
            margin-bottom: 15px;
            padding: 15px;
            background-color: #fff;
            line-height: 2;
            h4{
                font-size: 15px;
            }
            p{
                font-size: 13px;
            }
        }
    }
}
</style>
